<template>
  <div>
    <el-container style="height: 100vh;border: 1px solid rgba(229,232,232,0.49)">
      <el-aside width="200px" style="background-color: rgb(125,198,243)">
        <el-menu :default-openeds="['2', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-home"></i>房源信息</template>
            <el-menu-item-group>
              <router-link to="/tenant_main" style="color: black"><el-menu-item index="1-1">房屋信息</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>个人</template>
            <el-menu-item-group>
              <router-link to="/tenant_lease" style="color: black"><el-menu-item index="2-1">我的租赁</el-menu-item></router-link>
              <el-menu-item index="2-2"  style="color: #409EFF;">报修</el-menu-item>
              <router-link to="/tenant_personaliInfo" style="color: black"><el-menu-item index="2-3">修改个人信息</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container >
        <el-header style="text-align: right; font-size: 12px; background-color: rgba(171,248,248,0.49)">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/" style="color: black"><el-dropdown-item>退出</el-dropdown-item></router-link>
              <el-dropdown-item>
                <el-button type="text" @click="outerVisible = true" style="color: black">个人信息</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="outerVisible"
                  width="30%"
                  append-to-body
                  :before-close="handleClose">

                  <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="账号" style="margin-right: 50px">
                      <el-input :value="form.tphone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" style="margin-right: 50px">
                      <el-input :value="form.tename"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio disabled v-model="form.sex"  label="男">男</el-radio>
                      <el-radio disabled v-model="form.sex" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="年龄" style="margin-right: 50px">
                      <el-input :value="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="目前居住地" style="margin-right: 50px">
                      <el-input :value="form.liveaddress"></el-input>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="outerVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-text="name"></span>
        </el-header>
        <el-main >
          <el-row style="text-align: center">
              <el-form ref="form" :model="form">
                <el-select v-model="value" placeholder="请选择房间" style="margin-left: -580px">
                  <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <div><br><br></div>
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="textarea"
                  maxlength="500"
                  style="width: 800px"
                  :autosize="{minRows:4, maxRows:8}"
                >
                </el-input>
                <div><br><br></div>
                <el-button type="primary" @click="put()" style="margin-left: -700px">提交</el-button>
              </el-form>
          </el-row>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "tenant_repaire",
  data(){
    return{
      name: sessionStorage.getItem("name"),
      outerVisible: false,
      form:{},
      textarea:'',
      housename:'',
      options:['房间1','房间2','房间3','房间4'],
      value:'',
      meeting: []
    }
  },
  created() {
    this.getPersonalInfo()
    this.getroom()
    this.getmeeting()
  },
  methods:{
    getPersonalInfo(){
      console.log(sessionStorage.getItem("id"))
      this.$axios({
        url: '/tenant/getPersonalInfo',
        params:{
          id: sessionStorage.getItem("id")
        }
      })
        .then(successResponse =>{
          this.form = successResponse.data
        })
    },
    put(){
      this.$confirm('确定提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        this.$axios({
          url: '/tenant/repaire',
          params:{
            id: sessionStorage.getItem("id"),
            roomname: this.value,
            descript: this.textarea
          }
        });
        this.value= '';
        this.textarea= '';
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });
      });
    },
    getroom(){
      this.$axios({
        url:'/tenant/getroom',
      }).then(successResponse =>{
        this.options=successResponse.data
      })
    }
  }
}
</script>

<style scoped>

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

router-link {
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
}

</style>

